<template>
  <div class="container">
    <div>
      <a-button type="primary" @click="addEntity">
        <template #icon><icon-plus-circle /></template>添加
      </a-button>
    </div>
    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.entityObj">
      <template #columns>
        <a-table-column title="模板名称">
          <template #cell="{ record }">
            <icon-eye style="font-size: 24px; color:#f60000" @click="viewGYMB"></icon-eye>
            {{record.name}}
          </template>
        </a-table-column>
        <a-table-column title="产品类型" data-index="lx"></a-table-column>
        <a-table-column title="操作" width="350">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="editEntity(record.id)"><template #icon><icon-edit /></template>修改</a-button>
              <a-popconfirm content="确认删除吗?" @ok="deleteEntity(record.id)">
                <a-button type="primary" status="danger" size="small"><template #icon><icon-delete /></template>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-modal :title="state.popupTitle" v-model:visible="state.entityDetailVisible" :footer="false" width="1200px">
      <GymbDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId"></GymbDetail>
    </a-modal>

    <div v-show="state.viewGYMB" style="margin-top: 20px">
      <a-steps type="arrow" :current="100">
        <a-step v-for="(step,index) in state.stepList" :description="step" :key="step">{{step}}</a-step>
      </a-steps>
      <div style="text-align: center">
        <icon-delete style="color: #f60000;font-size: 30px" @click="hiddenGYMB"></icon-delete>
      </div>
    </div>

    <a-card title="功能介绍" class="mt15">
      <ul>
        <li>1、工艺路线模板是工艺路线的快捷方式</li>
        <li>2、产品设计工艺路线时，可选择工艺路线模板，快速生成工艺路线</li>
      </ul>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const GymbDetail = defineAsyncComponent(() => import('@/views/basedata/gymb/gymbDetail.vue'));

const state = reactive({
  entityObj: [],
  entityDetailVisible : false,
  popupTitle : '',
  popupEntityId : 0,

  viewGYMB : false,
  stepList : ['下料','加热','快锻','精锻','热处理','机加工'],
})
const loadList = ()=>{
  state.entityObj = [
    {id : 1, name : '来料加工标准工艺', lx:'棒材'},
    {id : 2, name : '来料加工快锻工艺', lx:'棒材'},
    {id : 3, name : '自购原料标准工艺', lx:'棒材'},

    {id : 4, name : '标准工艺', lx:'齿轮箱锻件'},
  ]
}
const addEntity = ()=>{
  state.popupEntityId = 0;
  state.popupTitle= "新增工艺模板"
  state.entityDetailVisible= true
}
const editEntity = (id)=>{
  state.popupEntityId= id;
  state.popupTitle= "修改工艺模板"
  state.entityDetailVisible= true
}
const deleteEntity = (id)=>{
  Message.warning("功能未开")
}
const viewGYMB = ()=>{
  state.viewGYMB = true
}
const hiddenGYMB = ()=>{
  state.viewGYMB = false
}
onMounted(()=>{
  loadList();
})
onUnmounted(()=>{
})
</script>

<style scoped lang="less">
ul{
  color: #f60000; font-weight: bold;font-size: 16px;
  li{
    padding : 10px;
  }
}
</style>
